<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/commonVant::commonStaticVant"></div>
    <script th:src="@{/common/localStorage.js}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <van-form @submit="submitForm" validate-first>
        <van-cell-group>
            <van-field v-model="request.username" label="用户名" placeholder="请输入用户名"
                       :rules="[{ required:true, message: '用户名不能为空！' }]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.password" label="密码" placeholder="请输入密码"
                       :rules="[{ required:true, message: '密码不能为空！'}]"
            />
        </van-cell-group>
        <van-cell-group>
            <van-field v-model="request.code" center clearable label="验证码" placeholder="请输入验证码">
                <template #button>
                    <p v-show="loaded">验证码loading</p>
                    <img :src="codeUrl" alt="" v-show="!loaded" id="code" @click="refreshCode" @load="showCodeImg">
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
                登陆
            </van-button>
        </div>
        <van-cell-group>
            <a th:href="@{/home/register}" class="van-ellipsis" style="display: block;">去注册一个</a>
        </van-cell-group>
    </van-form>
    <van-notify v-model="failShow" type="danger">
        <van-icon name="bell" style="margin-right: 10px;"/>
        <span>{{failMessage}}</span>
    </van-notify>
</div>
<script>
    let mvvm = new Vue({
        el: "#app",
        data: {
            loaded: true,
            checked: true,
            time: '',
            codeUrl: '',
            successShow: false,
            failShow: false,
            failMessage: '',
            value: '',
            request: {
                username: '',
                password: '',
                code: '',
                timeCode: ''
            }
        },
        computed: {},
        methods: {
            mobileValidator(val) {
                return /^[1][3,5,7,8][0-9]{9}$/.test(val);
            },
            async submitForm(value) {
                const result = await httpPost('/user/login', this.request,);
                console.log(result);
                if (result.code == 200) {
                    window.setLocalStorage("token", result.data.token);
                    window.history.go(-1);
                } else {
                    this.failMessage = result.message;
                    this.failShow = true;
                    setTimeout(() => {
                        this.failShow = false;
                    }, 2000);
                }
            },
            refreshCode() {
                this.request.timeCode = new Date().getTime();
                this.codeUrl = "/login/getVertifyCode/" + this.request.timeCode;
            },
            showCodeImg() {
                console.log("正在加载图片验证码。。。")
                this.loaded = false;
            }
        },
        mounted() {
            this.request.timeCode = new Date().getTime();
            this.codeUrl = "/login/getVertifyCode/" + this.request.timeCode;

        },
        beforeCreated() {

        }
    })
</script>
<script th:inline="javascript">
</script>
</body>
<style>

</style>
</html>